<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner">
        <text class="fa fa-spinner fa-spin"></text>
        <text class="ml-2">加载中...</text>
      </view>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="error" class="error-container">
      <text class="text-red-500">{{ error }}</text>
      <view class="mt-4">
        <view class="inline-flex bg-primary text-white px-4 py-2 rounded-lg" @click="fetchProjectData">
          <text class="fa fa-refresh mr-2"></text>
          <text>重试</text>
        </view>
      </view>
    </view>
    
    <!-- 项目详情 -->
    <view v-else class="project-container">
      <!-- 项目头部 -->
      <view class="project-header">
        <view class="back-button" @click="goBack">
          <text class="fa fa-arrow-left"></text>
        </view>
        <text class="project-title">{{ project.title }}</text>
        <view id="voteButton" :class="hasVoted ? 'vote-btn-active' : 'vote-btn'" 
              @click="handleVote">
          <text class="fa fa-thumbs-up mr-1"></text>
          <text>{{ hasVoted ? '已投票' : '投票' }}</text>
        </view>
      </view>
      
      <!-- 项目图片 -->
      <view class="project-image-container">
        <image :src="project.imageUrl" alt="项目图片" class="project-image"></image>
        <view class="image-overlay">
          <view class="flex items-center justify-between px-4 py-3">
            <view v-if="project.isPopular" class="bg-primary/90 text-white px-3 py-1 rounded-full text-sm">热门项目</view>
            <view class="vote-count bg-white/20 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm">
              <text class="fa fa-heart mr-1"></text>
              <text>{{ project.voteCount }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 项目统计 -->
      <view class="project-stats">
        <view class="stat-item">
          <text class="stat-number">{{ project.voteCount }}</text>
          <text class="stat-label">票数</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ project.memberCount }}</text>
          <text class="stat-label">成员</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ project.createDate }}</text>
          <text class="stat-label">创建日期</text>
        </view>
      </view>
      
      <!-- 项目介绍 -->
      <view class="project-description">
        <view class="section-header">
          <view class="header-icon bg-primary"></view>
          <text class="header-text">项目介绍</text>
        </view>
        <text class="description-content">{{ project.description }}</text>
      </view>
      
      <!-- 项目团队 -->
      <view class="project-team">
        <view class="section-header">
          <view class="header-icon bg-primary"></view>
          <text class="header-text">项目团队</text>
        </view>
        <view class="team-members">
          <view class="team-member" v-for="(member, index) in project.teamMembers" :key="index">
            <view class="member-avatar">
              <image :src="`https://picsum.photos/id/${1000 + index}/200`" alt="成员头像" class="avatar-image"></image>
            </view>
            <view class="member-info">
              <text class="member-name">{{ member.name }}</text>
              <text class="member-role">{{ member.role }}</text>
              <text class="member-description">{{ member.description }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 投票按钮 (移动端底部固定) -->
      <view class="fixed-bottom-vote-btn" v-show="isMobile">
        <view id="voteButtonMobile" :class="hasVoted ? 'vote-btn-active' : 'vote-btn'" 
              @click="handleVote">
          <text class="fa fa-thumbs-up mr-1"></text>
          <text>{{ hasVoted ? '已投票' : '立即投票' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      error: null,
      hasVoted: false,
      voteCountChanged: false,
      project: {
        id: '',
        title: '',
        imageUrl: '',
        description: '',
        voteCount: 0,
        memberCount: 0,
        createDate: '',
        isPopular: false,
        teamMembers: []
      },
      isMobile: uni.getSystemInfoSync().windowWidth < 768
    }
  },
  methods: {
    // 获取项目数据
    fetchProjectData() {
      this.loading = true;
      this.error = null;
      
      // 模拟API请求
      setTimeout(() => {
        try {
          // 这里应该是实际的API请求
          // uni.request({
          //   url: 'https://api.example.com/projects/' + this.$route.query.id,
          //   method: 'GET',
          //   success: (res) => {
          //     this.processProjectData(res.data);
          //   },
          //   fail: (err) => {
          //     this.error = '获取项目数据失败: ' + err.errMsg;
          //   },
          //   complete: () => {
          //     this.loading = false;
          //   }
          // });
          
          // 模拟数据
          const mockData = {
            id: 'project-1',
            title: '绿色能源解决方案',
            imageUrl: 'https://picsum.photos/id/1/800/600',
            description: '我们的项目致力于开发高效、可持续的绿色能源解决方案，通过创新技术降低碳排放，为地球创造更美好的未来。我们利用太阳能、风能和水能等可再生能源，开发出一套完整的能源管理系统，帮助企业和家庭实现能源自给自足。',
            voteCount: 1254,
            memberCount: 3,
            createDate: '2023-05-15',
            isPopular: true,
            teamMembers: [
              { name: '张明', role: '项目负责人', description: '能源工程博士，拥有10年绿色能源领域经验' },
              { name: '李华', role: '技术总监', description: '电子工程硕士，专注于智能能源系统开发' },
              { name: '王芳', role: '设计师', description: '环境设计专家，专注于可持续建筑设计' }
            ]
          };
          
          this.processProjectData(mockData);
        } catch (err) {
          this.error = '获取项目数据出错: ' + err.message;
        } finally {
          this.loading = false;
        }
      }, 800); // 模拟网络延迟
    },
    
    // 处理项目数据
    processProjectData(data) {
      this.project = data;
      
      // 检查用户是否已投票（实际应用中应该从后端获取）
      // this.hasVoted = data.userHasVoted || false;
    },
    
    // 投票功能实现
    handleVote() {
      this.loading = true;
      
      // 模拟API请求
      setTimeout(() => {
        try {
          if (!this.hasVoted) {
            // 用户投票
            this.project.voteCount++;
            this.hasVoted = true;
            this.voteCountChanged = true;
            setTimeout(() => {
              this.voteCountChanged = false;
            }, 500);
            this.showNotification('投票成功！感谢您的支持！');
          } else {
            // 用户取消投票
            this.project.voteCount--;
            this.hasVoted = false;
            this.showNotification('已取消投票');
          }
          
          // 实际应用中应该发送请求到后端
          // uni.request({
          //   url: `https://api.example.com/projects/${this.project.id}/vote`,
          //   method: this.hasVoted ? 'POST' : 'DELETE',
          //   success: (res) => {
          //     if (res.data.success) {
          //       // 更新成功
          //     } else {
          //       this.showNotification('操作失败，请重试');
          //     }
          //   },
          //   fail: (err) => {
          //     this.showNotification('网络错误，请重试');
          //   }
          // });
        } catch (err) {
          this.showNotification('操作出错，请重试');
        } finally {
          this.loading = false;
        }
      }, 500);
    },
    
    // 显示通知消息
    showNotification(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  },
  onLoad() {
    this.fetchProjectData();
  },
  onReady() {
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '项目详情'
    });
  }
}
</script>

<style>
/* 全局样式 */
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading-spinner {
  display: flex;
  align-items: center;
  color: #4CAF50;
  font-size: 16px;
}

/* 错误状态样式 */
.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: 0 20px;
}

.text-red-500 {
  color: #f56c6c;
}

.mt-4 {
  margin-top: 10px;
}

.bg-primary {
  background-color: #4CAF50;
}

.text-primary {
  color: #4CAF50;
}

/* 项目容器 */
.project-container {
  padding: 0;
}

/* 项目头部 */
.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.project-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  flex-grow: 1;
  text-align: center;
  margin: 0 10px;
}

.vote-btn {
  background-color: #4CAF50;
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.vote-btn-active {
  background-color: #f56c6c;
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* 项目图片 */
.project-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 10px 0;
}

.vote-count {
  display: flex;
  align-items: center;
}

/* 项目统计 */
.project-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  background-color: white;
  border-bottom: 1px solid #eee;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* 通用部分样式 */
.project-description,
.project-team {
  padding: 15px 20px;
  background-color: white;
  margin-top: 10px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.header-icon {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  margin-right: 8px;
}

.header-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 项目介绍 */
.description-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 项目团队 */
.team-members {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.team-member {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border-radius: 8px;
  background-color: #fafafa;
}

.member-avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  overflow: hidden;
  margin-right: 12px;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  flex-grow: 1;
}

.member-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.member-role {
  font-size: 13px;
  color: #4CAF50;
  margin-top: 2px;
}

.member-description {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
}

/* 移动端底部固定投票按钮 */
.fixed-bottom-vote-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  background-color: white;
  border-top: 1px solid #eee;
  z-index: 10;
}

.vote-btn-active,
.vote-btn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.vote-btn {
  background-color: #4CAF50;
  color: white;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
}

.vote-btn-active {
  background-color: #f56c6c;
  color: white;
  box-shadow: 0 4px 8px rgba(245, 108, 108, 0.2);
}

/* 适配样式 */
@media (min-width: 768px) {
  .project-container {
    max-width: 768px;
    margin: 0 auto;
  }
  
  .project-header {
    border-radius: 10px 10px 0 0;
  }
  
  .fixed-bottom-vote-btn {
    display: none;
  }
  
  .vote-btn {
    padding: 8px 16px;
  }
}

/* Font Awesome 旋转动画 */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}
</style>
